import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Select, Table, Modal } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getStoreList, getUnBoundStoreList, createdStore } from '@/services/supplier/store/unBoundStore'

const { Option } = Select
// 表头
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center'
  },
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center'
  },
  {
    title: 'LOGO',
    dataIndex: 'logo',
    key: 'logo',
    align: 'center'
  },
  {
    title: '门店名称',
    dataIndex: 'storeName',
    key: 'storeName',
    align: 'center'
  },
  {
    title: '联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    align: 'center'
  },
  {
    title: '商户名称',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center'
  },
  {
    title: '店铺类型',
    dataIndex: 'storeType',
    key: 'storeType',
    align: 'center'
  },
  {
    title: '是否推荐',
    dataIndex: 'recommend',
    key: 'recommend',
    align: 'center'
  },
  {
    title: '是否认证',
    dataIndex: 'auth',
    key: 'auth',
    align: 'center'
  },
  {
    title: '是否默认',
    dataIndex: 'default',
    key: 'default',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  }
]

const UnBoundStore = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [storeList, setStoreList] = useState([])
  const [unBoundStoreList, setUnBoundStoreList] = useState([])
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [status, setStatus] = useState('5')
  const [supplierId, setSupplierId] = useState('')
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getStoreLists()
    await getUnBoundStoreLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`所属商户`}>
          {getFieldDecorator(`storeId`, {})
            (<Select
              showSearch
              filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
              placeholder="请选择"
            >
              {storeList && storeList.map(r => <Option key={r.id} value={r.id}>{r.merchantName}</Option>)}
            </Select>)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    console.log(type);
    switch (type) {
      case 99:
        showModal()
        break
    }

  }
  // 获取全部门店
  const getStoreLists = async () => {
    let res = await getStoreList()
    if (res.code === '0') {
      setStoreList(res.data)
    } else {
      alert(res.msg)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      getUnBoundStoreLists(page)
    }
  }
  // 获取未绑定门店列表
  const getUnBoundStoreLists = async (pageNo) => {
    let params = {
      pageNo,
      pageSize,
      status,
      supplierId
    }
    let res = await getUnBoundStoreList(params)
    if (res.code === '0') {
      setUnBoundStoreList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  const showModal = () => {
    setVisible(true)
  };

  const handleOk = e => {
    let obj = {}
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      obj = values
    })
    createdStores(obj.createdNum)
    setVisible(false)
  };
  // 批量生成门店
  const createdStores = async (num) => {
    let params = {
      addStoreAmount: num
    }
    let res = await createdStore(params)
    alert(res.msg)
    await init()
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={unBoundStoreList}
        rowKey={record => record.id}
        pagination={pagination}
      />
      <Modal
        title="批量生产门店"
        visible={visible}
        onOk={handleOk}
      >
        <Form.Item label="生成数量" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('createdNum', {})
            (<Input placeholder="请输入整数" />)}
        </Form.Item>
      </Modal>
    </PageHeaderWrapper>
  )
}

export default Form.create()(UnBoundStore)
